<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <div class="app-container">
      <el-card shadow="always" class="el-card__body">
        <el-form ref="refForm" :inline="true" :model="formInline" class="demo-form-inline">
          <el-row type="flex">
            <el-col><el-form-item class="el-form-item__label" label="司机账号"> <el-input v-model="pageParams.account" placeholder="请输入司机账号"></el-input> </el-form-item></el-col>
            <el-col><el-form-item label="司机姓名"> <el-input v-model="pageParams.name" placeholder="请输入司机姓名"></el-input> </el-form-item></el-col>
            <el-col><el-form-item label="司机手机号"> <el-input v-model="pageParams.phone" placeholder="请输入司机手机号"></el-input> </el-form-item></el-col>
          </el-row>
          <el-row type="flex">
            <el-col
              :span="8"><el-form-item label="所属机构">
                <!-- 下拉框嵌套树形组件 -->
                <el-select ref="refSelect" v-model="pageParams.agentId" placeholder="请选择所属机构">
                  <el-option hidden :label="selectName" :value="pageParams.agentId"> </el-option>
                  <el-tree
                    ref="refTree" :data="treeData" :props="defaultProps"
                    :expand-on-click-node="false"
                    @node-click="handleNodeClick"> </el-tree>
                </el-select> </el-form-item></el-col>
            <el-col
              :span="16"><el-form-item>
              <el-button class="el-button el-button--warning" @click="onSerch">搜索</el-button>
              <el-form-item>
                <el-button @click="onReset">重置</el-button>
              </el-form-item>
            </el-form-item></el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- 表格组件 -->
      <el-card shadow="always" class="el-card__body">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" prop="xuhao" label="序号" width="150"> </el-table-column>
          <el-table-column prop="account" label="司机账号" width="180"> </el-table-column>
          <el-table-column prop="name" label="司机姓名" width="180"> </el-table-column>
          <el-table-column prop="mobile" label="司机电话" width="150"> </el-table-column>
          <el-table-column prop="truck.licensePlate" label="关联车辆" width="150"> </el-table-column>
          <el-table-column prop="agency.name" label="所属机构" width="150"> </el-table-column>
          <el-table-column prop="truck.workStatus" label="工作状态" width="150"> </el-table-column>
          <el-table-column fixed="right" prop="address" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">配置车辆</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          :current-page="pageParams.page"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
import { driverList } from '@/api/transit'
import { agencyList } from '@/api/institutions'
export default {
  data() {
    return {
      selectName: '', // select框显示的name
      pageParams: {
        page: 1,
        pageSize: 10,
        account: null, // 司机账号
        agentId: null, // 机构id
        name: '', // 司机名称
        phone: '', // 电话
        workStatus: '' // 工作状态
      },
      tableData: [], // 表格数据
      total: null, // 总条数
      treeData: [], // 树状数据
      defaultProps: {
        // 树状数据说明
        children: 'children',
        label: 'name'
      },
      formInline: {}
    }
  },
  created() {
    this.getDriverList()
    this.getAgencyList()
  },
  methods: {
    // 获取分页司机数据列表
    async getDriverList() {
      const res = await driverList(this.pageParams)
      this.total = +res.data.counts
      // console.log(res, 'res001')
      // const newItems = res.data.items.map((v, i) => { return { ...v, xuhao: i + 1 } })
      // console.log(newItems, '001')
      this.tableData = res.data.items
    },
    // 切换条数
    async handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageParams.pageSize = val
      await this.getDriverList()
    },
    // 切换页码
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.page = val
      await this.getDriverList()
    },
    // 获取树状机构信息
    async getAgencyList() {
      const res = await agencyList()
      const jsonData = JSON.parse(res.data)
      console.log(jsonData, 'jsonData')
      this.treeData = jsonData
    },
    // 结构树点击事件
    handleNodeClick(data) {
      this.selectName = data.name
      this.pageParams.agentId = data.id
      console.log(this.pageParams, 'lalal')
      this.$refs.refSelect.blur() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
    },
    async onSerch() {
      console.log('搜索!')
      await this.getDriverList()
    },
    onReset() {
      console.log('重置！')
      // this.$refs.refForm.resetFields() // 重置表单
      this.pageParams.account = null
      this.pageParams.agentId = null
      this.pageParams.name = ''
      this.pageParams.phone = ''
      this.pageParams.workStatus = ''
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.center {
  margin-left: 250px; //auto //
}

// 别人的
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-card {
  overflow: initial;
}
</style>

